<div class="pure-view-container">
  <div class="x-view-title">${t('ui.security.resource.title.resourceManagement')}</div>
  <div class="x-search-bar">
    <form>
      <div class="form-row align-items-center">
        <div class="col-auto"><label class="sr-only" for="resourcePath"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.security.resource.field.resourcePath')}</div>
            </div><input type="text" class="form-control" id="resourcePath" data-x-name="searchField.resourcePath"
              data-x-type="autoTrimText" />
          </div>
        </div>
        <div class="col-auto"><label class="sr-only" for="remark"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.security.resource.field.remark')}</div>
            </div><input type="text" class="form-control" id="remark" data-x-name="searchField.remark"
              data-x-type="autoTrimText" />
          </div>
        </div>
        <div class="col-auto"><button type="button" class="btn btn-primary mb-2"
            data-x-ui="searchBtn">${t('ui.system.common.btn.search')}</button></div>
      </div>
    </form>
  </div>
  <div class="x-tool-bar"><button type="button" class="btn btn-outline-primary mb-2 btn-sm"
      data-x-ui="createBtn">${t('ui.system.common.btn.create')}</button></div>
  <table data-x-ui="resourceTable" class="x-table-custom">
    <thead>
      <tr>
        <th data-field="id" data-visible="false">ID</th>
        <th data-field="resourceTypeDesc">${t('ui.security.resource.field.resourceType')}</th>
        <th data-field="resourcePath">${t('ui.security.resource.field.resourcePath')}</th>
        <th data-field="accessMethod">${t('ui.security.resource.field.accessMethod')}</th>
        <th data-field="accessPolicyDesc">${t('ui.security.resource.field.accessPolicy')}</th>
        <th data-field="frozenFlagDesc">${t('ui.security.resource.field.frozenFlag')}</th>
        <th data-field="remark">${t('ui.security.resource.field.remark')}</th>
        <th>${t('ui.system.common.field.operate')}</th>
      </tr>
    </thead>
  </table>
  <div data-x-ui="newResourceDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.security.resource.dialog.newResource')}</h5><button type="button"
            class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group x-form-required"><label
                for="resourceType">${t('ui.security.resource.field.resourceType')}</label><select type="text"
                class="form-control" id="resourceType" name="resourceType" data-x-name="new.resourceType">
                <option value="API">${t('ui.security.resource.resourceType.api')}</option>
                <option value="PAGE">${t('ui.security.resource.resourceType.page')}</option>
              </select></div>
            <div class="form-group x-form-required"><label
                for="resourcePath">${t('ui.security.resource.field.resourcePath')}</label><input type="text"
                class="form-control" id="resourcePath" name="resourcePath" data-x-name="new.resourcePath"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 1, 500)}" /></div>
            <div class="form-group x-form-required"><label
                for="accessMethod">${t('ui.security.resource.field.accessMethod')}</label><select type="text"
                class="form-control" id="accessMethod" name="accessMethod" data-x-name="new.accessMethod">
                <option value="*">*</option>
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="DELETE">DELETE</option>
              </select></div>
            <div class="form-group x-form-required"><label
                for="accessPolicy">${t('ui.security.resource.field.accessPolicy')}</label><select type="text"
                class="form-control" id="accessPolicy" name="accessPolicy" data-x-name="new.accessPolicy">
                <option value="ANONYMOUS">${t('ui.security.resource.accessPolicy.anonymous')}</option>
                <option value="AUTHENTICATED">${t('ui.security.resource.accessPolicy.authenticated')}</option>
                <option value="GRANTED" selected="">${t('ui.security.resource.accessPolicy.granted')}</option>
              </select></div>
            <div class="form-group x-form-required"><label
                for="frozenFlag">${t('ui.security.resource.field.frozenFlag')}</label><select type="text"
                class="form-control" id="frozenFlag" name="frozenFlag" data-x-name="new.frozenFlag">
                <option value="true">${t('ui.system.common.option.bool.true')}</option>
                <option value="false" selected="">${t('ui.system.common.option.bool.false')}</option>
              </select></div>
            <div class="form-group"><label
                for="remark">${t('ui.security.resource.field.remark')}</label><input type="text"
                class="form-control" id="remark" name="remark" data-x-name="new.remark"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 50)}" /></div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <div data-x-ui="editResourceDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.security.resource.dialog.editResource')}</h5><button type="button"
            class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form><input type="hidden" id="id" name="id" data-x-name="edit.id" /><input type="hidden" id="versionNumber"
              name="versionNumber" data-x-name="edit.versionNumber" />
            <div class="form-group x-form-required"><label
                for="resourceType">${t('ui.security.resource.field.resourceType')}</label><select type="text"
                class="form-control" id="resourceType" name="resourceType" data-x-name="edit.resourceType">
                <option value="API">${t('ui.security.resource.resourceType.api')}</option>
                <option value="PAGE">${t('ui.security.resource.resourceType.page')}</option>
              </select></div>
            <div class="form-group x-form-required"><label
                for="resourcePath">${t('ui.security.resource.field.resourcePath')}</label><input type="text"
                class="form-control" id="resourcePath" name="resourcePath" data-x-name="edit.resourcePath"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 1, 500)}" /></div>
            <div class="form-group x-form-required"><label
                for="accessMethod">${t('ui.security.resource.field.accessMethod')}</label><select type="text"
                class="form-control" id="accessMethod" name="accessMethod" data-x-name="edit.accessMethod">
                <option value="*">*</option>
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="DELETE">DELETE</option>
              </select></div>
            <div class="form-group x-form-required"><label
                for="accessPolicy">${t('ui.security.resource.field.accessPolicy')}</label><select type="text"
                class="form-control" id="accessPolicy" name="accessPolicy" data-x-name="edit.accessPolicy">
                <option value="ANONYMOUS">${t('ui.security.resource.accessPolicy.anonymous')}</option>
                <option value="AUTHENTICATED">${t('ui.security.resource.accessPolicy.authenticated')}</option>
                <option value="GRANTED" selected="">${t('ui.security.resource.accessPolicy.granted')}</option>
              </select></div>
            <div class="form-group x-form-required"><label
                for="frozenFlag">${t('ui.security.resource.field.frozenFlag')}</label><select type="text"
                class="form-control" id="frozenFlag" name="frozenFlag" data-x-name="edit.frozenFlag">
                <option value="true">${t('ui.system.common.option.bool.true')}</option>
                <option value="false" selected="">${t('ui.system.common.option.bool.false')}</option>
              </select></div>
            <div class="form-group"><label
                for="remark">${t('ui.security.resource.field.remark')}</label><input type="text"
                class="form-control" id="remark" name="remark" data-x-name="edit.remark"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 50)}" /></div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <script src="${appJs('app/security/resource/resource-management.js')}" type="text/javascript"></script>
</div>